<template>
  <view class="date-selector">
    <!-- 标签显示 -->
    <view class="form-label">期望就诊时间</view>
    
    <!-- 日期选择器 -->
    <view class="picker-wrapper" @click="showDatePicker = true">
      <view class="picker-display">
        <text class="selected-date">{{displayDate}}</text>
        <text class="days-indicator">（{{daysFromToday}}天后）</text>
      </view>
      <text class="arrow">∨</text>
    </view>
    
    <!-- 日期选择弹窗 -->
    <uni-popup ref="datePopup" type="bottom">
      <view class="popup-content">
        <view class="popup-header">
          <view class="cancel-btn" @click="hidePopup">取消</view>
          <view class="confirm-btn" @click="confirmSelection">确定</view>
        </view>
        
        <!-- 自定义日期选择器 -->
        <view class="custom-picker">
          <scroll-view scroll-y class="scroll-area">
            <view 
              v-for="(item, index) in dateOptions" 
              :key="index"
              class="picker-item"
              :class="{selected: selectedIndex === index}"
              @click="selectDate(index)"
            >
              <view class="date-text">{{item.displayDate}}</view>
              <view class="days-text">{{item.daysFromToday}}天后</view>
            </view>
          </scroll-view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    // 获取当前日期
    const today = new Date();
    const todayStr = this.formatDate(today);
    
    return {
      // 控制弹窗显示
      showDatePickers: false,
      // 当前选中的索引
      selectedIndex: 0,
      // 当前选中的日期对象
      selectedDateObj: null,
      // 显示用的日期字符串
      displayDate: todayStr,
      // 距离今天的天数
      daysFromToday: 0,
      // 日期选项数组
      dateOptions: this.generateDateOptions(30) // 生成未来30天的选项
    };
  },
  
  created() {
    // 初始化选中第一个选项（今天）
    this.selectedDateObj = {
      date: new Date(),
      displayDate: this.formatDate(new Date()),
      daysFromToday: 0
    };
  },
  
  methods: {
    // 日期格式化方法
    formatDate(date) {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    
    // 生成日期选项的方法
    generateDateOptions(daysCount) {
      const options = [];
      const today = new Date();
      
      for (let i = 0; i <= daysCount; i++) {
        const date = new Date(today);
        date.setDate(today.getDate() + i);
        
        options.push({
          date: date,
          displayDate: this.formatDate(date),
          daysFromToday: i
        });
      }
      
      return options;
    },
    
    // 显示弹窗
    showDatePicker() {
      this.$refs.datePopup.open();
    },
    
    // 隐藏弹窗
    hidePopup() {
      this.$refs.datePopup.close();
    },
    
    // 选择日期项
    selectDate(index) {
      this.selectedIndex = index;
      this.selectedDateObj = this.dateOptions[index];
    },
    
    // 确认选择
    confirmSelection() {
      this.displayDate = this.selectedDateObj.displayDate;
      this.daysFromToday = this.selectedDateObj.daysFromToday;
      
      this.hidePopup();
      
      // 触发事件，通知父组件
      this.$emit('date-selected', {
        date: this.displayDate,
        daysFromToday: this.daysFromToday
      });
    }
  }
};
</script>

<style scoped>
/* 整体容器样式 */
.date-selector {
  width: 100%;
  background-color: #ffffff;
  margin-bottom: 20rpx;
}

/* 表单项标签样式 */
.form-label {
  font-size: 32rpx;
  color: #333333;
  padding: 30rpx;
}

/* 选择器包装器样式 */
.picker-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #eeeeee;
  background-color: #ffffff;
}

/* 选择器显示区域样式 */
.picker-display {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 选中日期文本样式 */
.selected-date {
  font-size: 32rpx;
  color: #333333;
}

/* 天数指示器样式 */
.days-indicator {
  font-size: 28rpx;
  color: #999999;
  margin-top: 6rpx;
}

/* 下拉箭头样式 */
.arrow {
  font-size: 30rpx;
  color: #999999;
  margin-left: 10rpx;
}

/* 弹窗内容样式 */
.popup-content {
  background-color: #ffffff;
  border-radius: 20rpx 20rpx 0 0;
  padding: 30rpx;
}

/* 弹窗头部样式 */
.popup-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

/* 取消按钮样式 */
.cancel-btn {
  font-size: 30rpx;
  color: #666666;
  padding: 10rpx 30rpx;
}

/* 确认按钮样式 */
.confirm-btn {
  font-size: 30rpx;
  color: #007AFF;
  padding: 10rpx 30rpx;
}

/* 自定义选择器样式 */
.custom-picker {
  height: 60vh;
}

/* 滚动区域样式 */
.scroll-area {
  height: 100%;
}

/* 选择器项目样式 */
.picker-item {
  display: flex;
  flex-direction: column;
  padding: 30rpx 0;
  text-align: center;
  border-bottom: 1rpx solid #f5f5f5;
}

/* 日期文本样式 */
.date-text {
  font-size: 32rpx;
  color: #333333;
}

/* 天数文本样式 */
.days-text {
  font-size: 28rpx;
  color: #999999;
  margin-top: 6rpx;
}

/* 选中项样式 */
.picker-item.selected {
  background-color: #f9f9f9;
}
</style>